<template>
  <div class="businessdistrict-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="共享商圈" name="first">
          <el-form :inline="true">
            <el-form-item label="店铺名称:">
              <el-input v-model="form.shopName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="行业:">
              <el-select v-model="form.industryName" placeholder="请选择">
                <el-option label="餐饮业" value="餐饮业" />
                <el-option label="服务业" value="服务业" />
                <el-option label="旅游业" value="旅游业" />
                <el-option label="绿化业" value="绿化业" />
                <el-option label="IT业" value="IT业" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-alert
            title="审核店铺，店铺审核通过之后，店铺既可在线上上线运营，品台将正式开始对店铺进行管理"
            type="warning"
            :closable="false"
            show-icon
          />
          <!-- 表格 -->
          <el-table style="width: 100%" :data="list">
            <el-table-column prop="shopId" label="店铺编号" />
            <el-table-column prop="shopName" label="店铺名称" />
            <el-table-column prop="industryName" label="店铺行业" />
            <el-table-column prop="address" label="店铺地址" />
            <el-table-column prop="tel" label="联系电话" />
            <el-table-column prop="ID" label="推广人ID" />
            <el-table-column prop="equitiesName" label="权益级别" />
            <el-table-column prop="sale" label="销售额" />
            <el-table-column label="操作" fixed="right" width="200">
              <template>
                <el-button type="text" size="small">详情</el-button>
                <el-button type="text" size="small">查看商品</el-button>
                <el-button type="text" size="small">经营分析</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="page.current "
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="sizes"
            :page-size="page._limit"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="个人商圈" name="second">个人商圈</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getShoplist } from '@/api/shop.js'
export default {
  name: 'BusinessDistrict',
  data() {
    return {
      activeName: 'first',
      form: {
        industryName: '',
        shopName: ''
      },
      total: 0,
      page: {
        _page: 1,
        _limit: 2
      },
      sizes: [2, 5, 10, 20],
      list: []
    }
  },
  mounted() {
    this.getShoplist()
  },
  methods: {
    async getShoplist() {
      const data = await getShoplist(this.page)
      this.total = data.data.total
      this.list = data.data.data
    },
    handleClick() {},
    onSubmit() {
      this.list = this.list.filter(item => item.shopName.trim() === this.form.shopName.trim() && item.industryName.trim() === this.form.industryName.trim())
    },
    reset() {
      this.form.shopName = ''
      this.form.industryName = ''
    },
    handleSizeChange(newSize) {
      this.page._limit = newSize
      this.getShoplist()
    },
    handleCurrentChange(newPage) {
      this.page._page = newPage
      this.getShoplist()
    }
  }
}
</script>

<style lang="scss" scoped>
.businessdistrict-container {
  .el-alert--warning.is-light {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #E6F7FF;
    color: #666;
    border: 1px solid #1890FF;
    ::v-deep.el-alert__icon {
      color: #1890FF;
    }
  }
  .el-pagination {
    margin-top: 20px;
  }
}
</style>
